<template>
  <!-- <atomForm :ref="ref" v-bind="attrs" :data="data" @change="change"></atomForm> -->
  <AtomForm v-if="show&&attrs"
   :ref="ref" 
   v-bind="attrs" 
   :data="anc.dataSet.formData"
   @onload="load"
   @change="change"
   @validate="onValidate"></AtomForm>
</template>

<script>
const ref = "createView";
export default {
  name: ref,
  components: {},
  inject: ["anc"],
  data() {
    return {
      ref,
      show:false,
      attrs:null,
    };
  },
  props: {},
  watch: {
    // 'anc.deptOptions': {
    //   handler(val) {
    //     this.attrs = this.attrsTpl();
    //   }
    // }
  },
 
  mounted() {
    this.$nextTick(() => {
      this.$set(this.anc.vms, this.ref, this);
      this.pageInit();
    });
  },
  
  created() {
    // this.beforePageInit();
  },
 
  methods: {
    /**
     * 页面加载前初始化
     */
    beforePageInit() {
      let tpl = {}
      this.attrs = this.attrsTpl();
      this.attrs.config.columns.map(item => {
        tpl[item.key] = null
      })
      this.anc.dataSet.formData = tpl
      this.show = true;
    },
    /**
     * 页面加载后初始化
     */
    pageInit(){

    },
    /**
     * @description: 获取表格属性
     * @param {*} attr
     * @return {*}
     */
    attrsTpl() {
      return {
        config: {
          labelWidth: 100, //label宽度
          labelPosition: "right", //label位置
          cols: 3, //一行几列
          onlyRead: false, //是否只读
          sync: true, //是否同步
          columns: [
            {
              title: "工号", //字段标题
              key: "jobNumber", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              tip: {
                icon: "",
                size: 16,
                iconStyle: {},
                theme: "light",
                placement: "top",
                content: "",
                contentStyle: {},
              },
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "text", //编辑器类型
                },
                style: {
                  //样式配置
                },
              },
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "必填",
                  trigger: ["change", "blur"],
                },
                {
                  pattern: /^[A-Za-z0-9]{4,16}$/,
                  message: "4-16位字母、数字",
                  trigger: ["change", "blur"],
                },
              ],
            },
            {
              title: "人员名称", //字段标题
              key: "peopleName", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              tip: {
                icon: "",
                size: 16,
                iconStyle: {},
                theme: "light",
                placement: "top",
                content: "",
                contentStyle: {},
              },
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "text", //编辑器类型
                },
                style: {
                  //样式配置
                },
              },
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "必填",
                  trigger: "blur",
                },
              ],
            },
            {
              title: "手机号码", //字段标题
              key: "phoneNumber", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              // tip: {
              //   icon: "md-information",
              //   size: 16,
              //   iconStyle: {},
              //   theme: "light",
              //   placement: "top",
              //   content: "",
              //   contentStyle: {},
              // },
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "text", //编辑器类型
                  maxlength: 11,
                },
                style: {
                  //样式配置
                },
              },
              rules: [
                {
                  required: true,
                  type: "string",
                  message: "必填",
                  trigger: "blur",
                },
                {
                  pattern: /^1[3-9]\d{9}$/,
                  message: "请输入正确的手机号码",
                  trigger: "blur",
                },
              ],
            },
            {
              title: "部门名称", //字段标题
              key: "sf_code", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "select", //编辑器类型
                  options: this.anc.deptOptions,
                },
                style: {
                  //样式配置
                },
              },
              rules: [],
            },
            {
              title: "性别", //字段标题
              key: "gender", //字段key
              line: false, //是否独占一行
              titleStyle: {},
              config: {
                //编辑器配置，可以是函数，参数为(item,index,data)
                editor: {
                  //编辑器配置
                  type: "select", //编辑器类型
                  options: [
                    { label: "男", value: "男" },
                    { label: "女", value: "女" },
                  ],
                },
                style: {
                  //样式配置
                },
              },
              rules: [],
            },
          ], //字段列表
          rules: {},
        },
        data: { key: "abc" }, //数据
      };
    },
    /**
     * 事件：表格加载后获取表格实例
     * @param tableIns 表格实例，相当于 this.$refs[this.ref]
     */
    load(tableIns){

    },
    change(key,value){

    },
    onValidate(prop, status, error){

    },
    validate(fn) {
      return this.$refs[this.ref].validate((valid) => {
        if (fn) {
          return fn(valid);
        } else {
          return valid;
        }
      });
    },
    resetFields() {
      this.$refs[this.ref].resetFields();
    },
  },
};
</script>
<style scoped></style>
